<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_3774071_kx3gdczskp/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            display: flex;
        }

        .box .box-left {
            width: 200px;
            list-style: none;
            background-color: #353942;
        }

        .box .box-left li {
            width: 100%;
            height: 50px;
            color: white;
            text-align: center;
            padding: 0 10px;
            line-height: 50px;
        }

        .box .box-left li:nth-child(3) {
            background-color: #157efb;
        }

        .box .box-left li:nth-child(6) {
            background-color: #ebedec;
            color: gray;
        }

        .box main {
            flex: 1;
            background-color: pink;
        }

        .box main h2 {
            height: 80px;
            background-color: #ffffff;
        }

        .box main h2 li {
            float: left;
            margin-top: 20px;
            list-style: none;
            margin-left: 30px;
        }

        .box main h2 input {
            height: 40px;
            width: 250px;
            padding-left: 10px;
            border-radius: 5px;
            margin-top: 20px;
            margin-left: 30px;
            border: none;
            background-color: #f3f4f6;
        }
        .box main{
            min-height: 800px;
        }

        .box main .da3 {
            background-color: #f5f6fa;
            height: 50px;
            padding-left: 30px;
            line-height: 50px;
        }

        .box main .main-box {
            background-color: #f5f6fa;
            padding: 30px;
            display: flex;
            flex-wrap: wrap;
        }

        .box main .main-box .main-left,
        .box main .main-box .main-rigth {
            width: 600px;
            height: 400px;
            margin: 10px;
        }
        .box main .main-box .tab{
            width: 600px;
        }
        .box main .main-box .tab table{
            width:100% ;
        }
        .box main .main-box .tab tbody tr td{
            height: 50px;
            text-align: center;
        }
    </style>
</head>


<body>
    <div class="box">
        <ul class="box-left">
            <li>AdminLTE 3</li>
            <li>Alexander Pierce </li>
            <li>Dashboard</li>
            <li>Dashboard v1</li>
            <li>Dashboard v2</li>
            <li>Dashboard v3</li>
            <li>Widgets</li>
            <li>Charts</li>
            <li>Elements</li>
            <li>Forms </li>
            <li>Tables</li>
        </ul>
        <main>
            <h2>
                <li>home</li>
                <li>Contact</li>
                <input type="text" placeholder="Search">
            </h2>
            <div class="da3">Dashboard v3</div>
            <div class="main-box">
                <div class="main-left">

                </div>
                <div class="main-rigth">

                </div>
                <div class="tab">
                    <table>
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Price</th>
                                <th>Sales</th>
                                <th>More</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./promise-ajax函数.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./Mock数据包+渲染函数.js"></script>
<script>
    //echats.js文件会对外暴露一个echats对象
    //1.创建并初始化一个echarts实例
    let mainLeft = document.querySelector('.box main .main-box .main-left');
    let e = echarts.init(mainLeft);

    //2.绘制图表
    let getname = ['18th', '20th', '22th', '24th', '26th', '28th', '30th'];
    let getvalue = [100, 120, 176, 200, 180, 180, 190];
    let getvalue1 = [60, 80, 70, 65, 80, 80, 100];

    e.setOption({
        backgroundColor: '#fff',
        title: {
            text: "Online Store Visitors\n\n\n820\nVisitors Over Time",

        },
        grid: {
            top: '30%',
            left: '3%',
            right: '5%',
            bottom: '15%',
            containLabel: true
        },
        legend: {
            icon: "roundRect",
            data: [
                {
                    name: 'This Week',
                    itemStyle: {
                        symbol: "rect",
                        color: "#177dfd"
                    }
                },
                {
                    name: 'Last Week',
                    itemStyle: {
                        color: "#cccdcf"
                    }
                }
            ],
            right: "10%",
            bottom: "5%",
            textStyle: {
                color: "#A1D5FF",
                fontSize: 12
            },
            itemWidth: 10,  // 设置宽度
            itemHeight: 15, // 设置高度
            itemGap: 10, // 设置间距

        },
        xAxis: [{
            data: getname,
            axisLabel: {
                margin: 10,
                color: '#A1D5FF',
                textStyle: {
                    fontSize: 12
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#102E74',
                }
            },
            axisTick: {
                show: false
            },
        }],
        yAxis: [{
            splitNumber: 10,
            type: 'value',
            axisLabel: {
                color: '#A1D5FF',
                textStyle: {
                    fontSize: 12
                },
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: 'gray',
                }
            }
        }],
        series: [
            {
                name: 'This Week',
                symbol: "circle",
                smooth: true,
                symbolSize: 8,
                type: "line",
                data: getvalue,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        color: '#167eff',
                        shadowColor: 'rgba(93,241,255 ,0.7)',
                        shadowBlur: 10,
                    },

                }
            },
            {
                name: 'Last Week',
                symbolSize: 8,
                symbol: "circle",
                type: "line",
                data: getvalue1,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        color: '#cccdcf',
                        shadowColor: '#FFEED9FF',
                        shadowBlur: 10,
                    },

                }
            }
        ]
    })
</script>
<script>
    let rightR = document.querySelector('.box main .main-box .main-rigth');
    let r = echarts.init(rightR);
    r.setOption({
        title: {
            text: "Sales\n\n\n$18,230.00\nSales Over Time",
            subtextStyle: {
                color: '#eff6fb',
                fontSize: 16,
                fontWeight: 'normal'
            },
            padding: [0, 10]
        },
        backgroundColor: 'rgb(128,128,128,0)',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true,
                    backgroundColor: '#333'
                }
            }
        },
        grid: {
            containLabel: true,
            top: '30%',
            left: '3%',
            right: '5%',
            bottom: '15%',
            containLabel: true
        },
        legend: {
            right: "10%",
            bottom: "5%",
            data: ['Last year', 'This year'],
            itemWidth: 15,
            itemHeight: 18,
            padding: 10
        },
        xAxis: {
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#6c96b7',
                    width: 1
                },
            },
            axisLabel: { //坐标轴刻度标签的相关设置。
                interval: 0,
                // rotate: "45",
                fontSize: 14
            },

        },
        yAxis: [{
            type: 'value',
            axisLabel: {
                formatter: '${value}k',
                fontSize: 16
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#6c96b7',

                }
            },
            splitLine: {
                lineStyle: {
                    color: '#25609d',
                    width: 2
                }
            }
        },
        ],
        series: [{
            name: 'This year',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: '#157efb'
                }
            },
            data: [2, 4, 3, 3, 1, 2, 3],
        },
        {
            name: 'Last year',
            type: 'bar',
            barWidth: 20,
            barGap: '20%',
            itemStyle: {
                normal: {
                    color: '#cfd3dc'
                }
            },
            data: [3, 2, 3, 4, 1, 3, 1],
        }
        ]
    })
</script>
<script>
    render1(data.list1)
</script>